/**
 * ==================================
 * 治理成效分析
 * ==================================
 */
import { useInterval, useRequest } from 'ahooks'
import { FC, useMemo, useRef, useState } from 'react'

import alarmIcon from '@/assets/icons/safeCoGovernance/alarm.png'
import orderIcon from '@/assets/icons/safeCoGovernance/order.png'

import { Tb } from '../../../BigScreenBase/ModuleTitle'
import DisplayCard from '../../Components/DisplayCard'
import OverviewBox from './OverviewBox'
import { getGovernanceDffectivenessData } from './data'
import LineChart from './lineChart'

export type GovernanceDffectivenessAnalysisProps = {
  entId: string
}

const governanceDffectivenessAnalysisTabList = [
  {
    name: '年度',
    value: 'y'
  },
  {
    name: '季度',
    value: 'q'
  },
  {
    name: '月度',
    value: 'm'
  }
]

const GovernanceDffectivenessAnalysis: FC<
  GovernanceDffectivenessAnalysisProps
> = ({ entId }) => {
  const [activeDateTypeTabKey, setActiveDateTypeTabKey] = useState<string>('q')
  const currentDataTypeTabIndexRef = useRef<number>(1)
  const [dataTypeTabInterval, setDataTypeTabInterval] = useState<
    number | undefined
  >(60 * 1000)

  const { data } = useRequest(
    () => {
      return getGovernanceDffectivenessData({
        entId,
        timeType: activeDateTypeTabKey
      })
    },
    {
      refreshDeps: [entId, activeDateTypeTabKey]
    }
  )
  const lineChartData = useMemo(() => {
    const defaultValue = { xdata: [], ydata: [], ydata2: [] }
    return (
      data?.lineChart.reduce<{
        xdata: string[]
        ydata: number[]
        ydata2: number[]
      }>((acc, cur) => {
        acc.xdata.push(cur.xname)
        acc.ydata.push(cur.ynum.alarmNum)
        acc.ydata2.push(cur.ynum.orderNum)
        return acc
      }, defaultValue) || defaultValue
    )
  }, [data])
  const max = useMemo(() => {
    return Math.max(...lineChartData.ydata, ...lineChartData.ydata2)
  }, [lineChartData])

  useInterval(() => {
    const newIndex =
      (currentDataTypeTabIndexRef.current + 1) %
      governanceDffectivenessAnalysisTabList.length
    const newValue = governanceDffectivenessAnalysisTabList[newIndex].value

    currentDataTypeTabIndexRef.current = newIndex

    setActiveDateTypeTabKey(newValue)
  }, dataTypeTabInterval)

  const onModuleTitleTabChange = (option: Tb) => {
    const newIndex = governanceDffectivenessAnalysisTabList.findIndex(
      (item) => item.value === option.value
    )

    currentDataTypeTabIndexRef.current = newIndex
    setActiveDateTypeTabKey(option.value as string)
  }

  function onModuleTitleTabMouseEnter() {
    setDataTypeTabInterval(undefined)
  }

  function onModuleTitleTabMouseLeave() {
    setDataTypeTabInterval(60 * 1000)
  }

  return (
    <DisplayCard
      title="治理成效分析"
      height={504}
      moduleTitleTabList={governanceDffectivenessAnalysisTabList}
      onModuleTitleTabChange={onModuleTitleTabChange}
      onModuleTitleTabMouseEnter={onModuleTitleTabMouseEnter}
      onModuleTitleTabMouseLeave={onModuleTitleTabMouseLeave}
      activeTabKey={activeDateTypeTabKey}
      bodyStyle={{
        height: 'calc(100% - 42px)'
      }}
    >
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          columnGap: 24
        }}
      >
        <OverviewBox
          title="风险报警"
          iconPath={alarmIcon}
          color="red"
          qoqValue={data?.alarm?.hbPiont}
          yoyValue={data?.alarm?.tbPiont}
          entId={entId}
          dateType={activeDateTypeTabKey}
        />
        <OverviewBox
          title="治理工单"
          iconPath={orderIcon}
          color="green"
          qoqValue={data?.order?.hbPiont}
          yoyValue={data?.order?.tbPiont}
          entId={entId}
          dateType={activeDateTypeTabKey}
        />
      </div>
      <div style={{ paddingTop: 40 }}>
        <LineChart
          dataAnalysisList={lineChartData}
          chartHeight={260}
          maxx={max}
        />
      </div>
    </DisplayCard>
  )
}

export default GovernanceDffectivenessAnalysis
